﻿<UserControl x:Class="WpfGauge.Gauge"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:converters="clr-namespace:WpfGauge.Converters"
             xmlns:local="clr-namespace:WpfGauge"
             x:Name="GaugeControl"
             mc:Ignorable="d" Width="300" Height="300"
             d:DesignHeight="300" d:DesignWidth="500">
    <UserControl.Resources>

        <converters:SubtractionFormatter x:Key="SubtractionFormatter" />
        <converters:ValueTextMarginConverter x:Key="ValueTextMarginConverter" />
        
        <Style x:Key="DefaultTextStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="GhostWhite" />
            <Setter Property="FontSize" Value="22" />
            <Setter Property="FontFamily" Value="Agency FB" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
        
    </UserControl.Resources>
    <Grid Grid.Column="1" Grid.Row="1" 
          Width="{Binding ElementName=GaugeControl, Path=Width}" 
          Height="{Binding ElementName=GaugeControl, Path=Height}" x:Name="LayoutRoot">
        <!--Outer Edge-->
        <Ellipse StrokeThickness="1" x:Name="OuterEllipse" Stroke="DimGray" Margin="0" Stretch="UniformToFill">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Gainsboro" Offset="0.462"/>
                    <GradientStop Color="Silver" Offset="0.552"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--Inner Edge-->
        <Ellipse x:Name="InnerEllipse" Stroke="GhostWhite" Fill="Black" Margin="10" Stretch="UniformToFill" />
        <Image Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=LightVisibility}"
            Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=Width, Converter={StaticResource SubtractionFormatter}, ConverterParameter=25}" 
            Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=Height, Converter={StaticResource SubtractionFormatter}, ConverterParameter=25}"
            Source="/WpfGauge;component/Images/gauge_background.png">
            <Image.Effect>
                <BlurEffect />
            </Image.Effect>
        </Image>

        <!--The grid where all dynamic elements are added-->
        <Grid x:Name="DynamicLayout" />

        <!--The grid where all GoalMarkers are drawn-->
        <Grid x:Name="GoalMarkerLayout" />

        <Canvas Width="0" Height="0">
            <Polygon x:Name="Needle"
                    ToolTipService.IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=IsNeedleTooltipEnabled}" 
                    StrokeThickness="0">
                <Polygon.ToolTip>
                    <ContentControl Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor}, Path=NeedleTooltip}" />
                </Polygon.ToolTip>
                <Polygon.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFF3D0D" Offset="0.462"/>
                        <GradientStop Color="#FFCD3700" Offset="0.552"/>
                    </LinearGradientBrush>
                </Polygon.Fill>
                <Polygon.RenderTransform>
                    <RotateTransform x:Name="NeedleRotateTransform" />
                </Polygon.RenderTransform>
                <Polygon.Effect>
                    <DropShadowEffect x:Name="NeedleDropShadowEffect" ShadowDepth="3" />
                </Polygon.Effect>
            </Polygon>
            <!--Needle Attachment - Outer-->
            <Ellipse Canvas.Top="-10" Canvas.Left="-10" Width="20" Height="20" Stroke="Silver">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCFCFCF" Offset="0.462"/>
                        <GradientStop Color="#FFB2B2B2" Offset="0.552"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Effect>
                    <DropShadowEffect ShadowDepth="3" />
                </Ellipse.Effect>
            </Ellipse>
            <Ellipse Canvas.Top="-8" Canvas.Left="-8" Width="16" Height="16" Stroke="#FFAAAAAA">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="#FF959595" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>

        <!--<TextBlock Margin="{Binding Path=Height, 
            RelativeSource={RelativeSource AncestorType={x:Type local:Gauge}, Mode=FindAncestor},
            Converter={StaticResource ValueTextMarginConverter}}" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Style="{StaticResource DefaultTextStyle}" x:Name="ValueText" />-->
        <TextBlock
                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Style="{StaticResource DefaultTextStyle}" x:Name="ValueText" />
    </Grid>
</UserControl>
